import React, { useEffect, useState } from 'react';
import { Container, Row, Form, Input, Label, Col } from 'reactstrap';
import { changeProfile } from '../../../../api/api';
import { toast } from "react-toastify";

const ProfilePage = () => {
    const [formData, setFormData] = useState({
        "fname": "",
        "lname": "",
        "deliverAddress": "",
        "zipCode": "",
        "phone_number": ""
    });

    // 处理表单输入变化  
    const handleInputChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const submitFormData = () => {
        var input = formData;
        var obj = JSON.parse(localStorage.getItem("XYCLogin"));
        if (obj != null) {
            input.email = obj.email_adress;
            changeProfile(input).then(res => {
                if (res.error_code == 2000) {
                    toast.success("Profiled Change Successfully!");
                    obj.deliver_adress= res.data.deliver_adress;
                    obj.zip_code = res.data.zip_code;
                    obj.phone_number = res.data.phone_number;
                    localStorage.setItem("XYCLogin", JSON.stringify(obj));
                    history.go(0);
                }
                else {
                    toast.warning(res.msg);
                }
            });
        }
    }

    useEffect(() => {
        var userInfo = localStorage.getItem("XYCLogin");
        if (userInfo) {
            setFormData({
                "fname": "",
                "lname": "",
                "deliverAddress": JSON.parse(userInfo) ? JSON.parse(userInfo).deliver_adress : "",
                "zipCode": JSON.parse(userInfo) ? JSON.parse(userInfo).zip_code : "",
                "phone_number": JSON.parse(userInfo) ? JSON.parse(userInfo).phone_number : "",
            })
        }
    }, [])
    return (
        <>
            <section className="contact-page register-page">
                <Container>
                    <Row>
                        <Col sm="12">
                            <h3>PERSONAL DETAIL</h3>
                            <Form className="theme-form">
                                <Row>
                                    <Col md="6">
                                        <Label for="fname">First Name</Label>
                                        <Input type="text" className="form-control" id="fname" name="fname" placeholder="First Name" onChange={handleInputChange}
                                            required="" />
                                    </Col>
                                    <Col md="6">
                                        <Label for="lName">Last Name</Label>
                                        <Input type="text" className="form-control" id="lname" name="lname" placeholder="Last Name" required="" onChange={handleInputChange} />
                                    </Col>
                                </Row>
                            </Form>
                        </Col>
                    </Row>
                </Container>
            </section>
            <section className="contact-page register-page section-b-space">
                <Container>
                    <Row>
                        <Col sm="12">
                            <h3>SHIPPING ADDRESS</h3>
                            <Form className="theme-form">
                                <Row>
                                    <Col md="6">
                                        <Label for="deliverAddress">*Address</Label>
                                        <Input type="text" className="form-control" id="deliverAddress" defaultValue={formData.deliverAddress} name="deliverAddress" placeholder="Address" onChange={handleInputChange}
                                            required="" />
                                    </Col>
                                    <Col md="6">
                                        <Label for="zipCode">*Zip Code</Label>
                                        <Input type="text" className="form-control" id="zipCode" name="zipCode" placeholder="zip-code" defaultValue={formData.zipCode} onChange={handleInputChange}
                                            required="" />
                                    </Col>

                                </Row>
                                <Row>
                                    <Col md="6">
                                        <Label for="phone_number">*Phone Number</Label>
                                        <Input type="text" className="form-control" id="phone_number" name="phone_number" placeholder="Phone Number" onChange={handleInputChange} defaultValue={formData.phone_number}
                                            required="" />
                                    </Col>
                                </Row>
                                <div className="col-md-12">
                                        <a href="#" className="btn btn-solid" style={{ width: 200 }} onClick={submitFormData}>Save setting</a>
                                    </div>
                            </Form>
                        </Col>
                    </Row>
                </Container>
            </section>
        </>
    )
}

export default ProfilePage;